<template>
  <div class="app-container">
    <div class="title">
      <h3 v-if="this.$route.params && this.$route.params.id">编辑讲师</h3>
      <h3 v-else>添加讲师</h3>
    </div>
    <el-form
      ref="teacherForm"
      :model="teacher"
      :rules="rules"
      label-width="120px"
    >
    <!-- 讲师名称 -->
      <el-form-item label="讲师名称" prop="name">
        <el-input v-model="teacher.name" />
      </el-form-item>
      <!-- 讲师排序 -->
      <el-form-item label="讲师排序" prop="sort">
        <el-input-number
          v-model="teacher.sort"
          controls-position="right"
          :min="1"
        ></el-input-number>
      </el-form-item>
      <!-- 讲师头衔 -->
      <el-form-item label="讲师头衔" prop="level">
        <el-select v-model="teacher.level" placeholder="请选择">
          <el-option label="高级讲师" :value="1" />
          <el-option label="首席讲师" :value="2" />
        </el-select>
      </el-form-item>
      <!-- 讲师资历 -->
      <el-form-item label="讲师资历" prop="career">
        <el-input v-model="teacher.career" />
      </el-form-item>
      <!-- 讲师资历 -->
      <el-form-item label="讲师简介" prop="intro">
        <el-input type="textarea" :rows="10" v-model="teacher.intro">
        </el-input>
      </el-form-item>
      <!-- 讲师头像 -->
      <el-form-item label="讲师头像">
        <!-- 头像缩略图 -->
        <PanThumb :image="teacher.avatar"></PanThumb>
        <!-- @click="imageShow=true" 代码量少的点击事件简写 -->
        <el-button
          type="primary"
          icon="el-icon-upload"
          @click="imageShow = true"
          >更换头像</el-button
        >
        <!-- 头像剪裁 -->
        <!-- 
          key：头像剪裁插件的唯一标识
          url：上传图片的api地址
          field：请求api时需要发送的字段名（后端api所约定的）
          close：关闭头像剪裁插件遮罩层时调用的方法
          crop-upload-success：头像上传成功时候的回调方法
         -->
        <ImageCropper
          v-show="imageShow"
          @close="close"
          :key="imageCropperKey"
          :url="`${BASE_URL}/file/upload?host=avatar`"
          field="file"
          @crop-upload-success="cropSuccess"
        >
        </ImageCropper>
      </el-form-item>
      <!-- 操作 -->
      <el-form-item style="margin-top: 50px">
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button
          style="margin-left: 50px"
          v-if="this.$route.params && this.$route.params.id"
          @click="onCancel"
          >取消
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import teacherApi from "@/api/teacher";
import PanThumb from "@/components/PanThumb";
import ImageCropper from "@/components/ImageCropper";

export default {
  components: { PanThumb, ImageCropper }, // 注册组件
  data() {
    return {
      BASE_URL: process.env.BASE_API, // 获取dev配置文件中的api地址
      imageCropperKey: 1, // 头像剪裁组件中的key
      imageShow: false, // 控制头像剪裁遮罩层是否显示
      teacher: {
        avatar: "https://hopu-dome.oss-cn-hangzhou.aliyuncs.com/default.jpg",
      },
      //   格式校验
      rules: {
        name: [
          { required: true, message: "请输入讲师姓名", trigger: "blur" },
          { max: 5, message: "长度最大为 5 个字符", trigger: "blur" },
        ],
        sort: [
          { type: "number", message: "序号必须是数字", trigger: "blur" },
          { required: true, message: "请输入序号", trigger: "blur" },
        ],
        level: [{ required: true, message: "请选择讲师头衔", trigger: "blur" }],
        career: [{ required: true, message: "请选择资历", trigger: "blur" }],
        intro: [{ required: true, message: "请输入简介", trigger: "blur" }],
      },
    };
  },
  // 通过路由监听，手动触发页面初始化的方法
  watch: {
    $route(to, from) {
      this.init();
    },
  },
  created() {
    //  根据路由判断当前操作是添加还是修改
    this.init();
  },
  methods: {
    //   提交表单
    onSubmit() {
      // 进行数据格式的合法校验
      this.$refs["teacherForm"].validate((valid) => {
        if (valid) {
          // 验证通过
          // 判断执行的是什么操作
          if (this.teacher.id) {
            // console.log("更新");
            // 调用更新讲师的方法
            this.updateList();
          } else {
            // console.log("添加");
            // 调用添加讲师的方法
            this.addList();
          }
        } else {
          //   失败
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 添加讲师函数
    addList() {
      // 调用添加讲师zpi
      teacherApi
        .addList(this.teacher)
        .then((res) => {
          // 提示添加成功信息
          this.$message({
            type: "success",
            message: "添加成功!",
          });
          // 添加成功后，跳转至讲师列表页面，通过编程式路由
          this.$router.push({ path: "/teacher" });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 更新讲师函数
    updateList() {
      // 调用更新讲师的api
      teacherApi.updateList(this.teacher).then((res) => {
        // 更新成功
        this.$message({
          type: "success",
          message: "修改成功!",
        });
        // 添加成功后，跳转至讲师列表页面，通过编程式路由
        this.$router.push({ path: "/teacher" });
      });
    },
    getByIdList(id) {
      teacherApi
        .getListById(id)
        .then((res) => {
          // 将当前讲师的信息绑定到表单中
          this.teacher = res.data;
        })
        .catch((err) => {
          this.$message({
            type: "error",
            message: "获取数据失败!",
          });
        });
    },
    // 页面初始化
    init() {
      if (this.$route.params && this.$route.params.id) {
        // 执行更新操作
        this.getByIdList(this.$route.params.id);
      } else {
        // 添加操作
        // 将teacher属性赋值为空
        this.teacher = {
          avatar: "https://hopu-dome.oss-cn-hangzhou.aliyuncs.com/default.jpg",
        };
      }
    },
    // 取消修改教师数据
    onCancel() {
      this.$router.go(-1);
    },
    // 关闭更换头像
    close() {
      this.imageShow = false;
    },
    // 头像上传成功之后的回调方法
    cropSuccess(data) {
      console.log(data);
      // 关闭头像剪裁插件
      this.imageShow = false;
      // 头像更换为上传后的图像
      this.teacher.avatar = data.ossUrl;

      // 修改头像剪裁插件的key，让遮罩层初始化为上传图片的最初状态
      this.imageCropperKey = this.imageCropperKey + 1;
    },
  },
};
</script>

<style scoped>
.line {
  text-align: center;
}
</style>

